<template>
  <!-- 项目实施 - 12相关方管理 - tab1在建项目 -->
  <div class="stakeholder-management-doing">
    <el-row :gutter="20">
      <el-col :span="8" v-for="(i, idx) in cardListData" :key="idx" class="card-group">
        <card-list :cardData="i" :idx="idx"></card-list>
      </el-col>
      <el-col :span="24">
        <el-form class="search" :inline="true" :model="formData" label-position="right" label-width="90px">
          <el-row :gutter="12">
            <el-col :span="16" v-if="showSearch == false">
              <advancedFilter></advancedFilter>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="项目名称">
                <el-input v-model="formData.ipt1" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="相关方名称">
                <el-input v-model="formData.ipt2" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="管理策略">
                <el-select v-model="formData.sel1" multiple clearable placeholder="请选择..." style="width: 100%;">
                  <el-option label="监督" value="0"></el-option>
                  <el-option label="随时告知" value="1"></el-option>
                  <el-option label="令其满意" value="2"></el-option>
                  <el-option label="重点管理" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="相关方">
                <el-select v-model="formData.sel2" multiple clearable placeholder="请选择..." style="width: 100%;">
                  <el-option label="是" value="0"></el-option>
                  <el-option label="否" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showSearch">
              <el-form-item label="分类">
                <el-select v-model="formData.sel3" multiple clearable placeholder="请选择..." style="width: 100%;">
                  <el-option label="内部" value="0"></el-option>
                  <el-option label="外部" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="showSearch ? 18 : 8" style="text-align: right;">
              <el-button type="primary">筛选</el-button>
              <el-button @click="resetForm">重置</el-button>
              <el-button type="text" @click="changeSearch"> {{showSearch===true ? '高级筛选' : '普通筛选'}} </el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-row :gutter="12" style="display: inline-flex;width: 100%;">
          <el-col :span="4" :md="5" class="border-r">
            <el-input v-model="treeSearch" class="tree-search" placeholder="搜索关键字" suffix-icon="el-icon-search"></el-input>
            <el-tree class="cust-tree" node-key="id" :data="treeData" ref="tree" :props="defaultProps" @node-click="handleNodeClick" default-expand-all></el-tree>
          </el-col>
          <el-col :span="20" :md="19">
            <div class="table-top-btns">
              <el-button type="primary" plain @click="showModal('add');"> 登记 </el-button>
            </div>
            <cust-act-table
              ref="custActTable"
              tableType="stakeholderManagementDoing"
              :list="tableData"
              :colConfigs="customColumns"
              @changePage="changePage"
              @getDetail="getDetail"
              @getSelectedRow="showModal('table');"
              :pageNum="page.pageNum"
              :pageSize="page.pageSize"
              :total="page.total"
              showIdx
              :showAct="true"
              rKey="index"
            ></cust-act-table>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 新增、修改、查看 -->
    <el-dialog :title="modalTitle" class="btn-modal" :visible.sync="modalState" @close="modalState = false"  width="800px" :close-on-click-modal="false">
      <modalBtns :modalType="modalType" @close="modalState = false"></modalBtns>
      <formName text="相关方登记册"></formName>
      <div class="form-content">
        <formPart listTitle="项目信息" ref="info1" :modalTitle="modalType == 'add' || modalType == 'edit' ? 'EDIT-FORM' : '查看'" :formList="formInfo.info1"></formPart>
        <formPart listTitle="相关方信息" ref="info2" :modalTitle="modalType == 'add' || modalType == 'edit' ? 'EDIT-FORM' : '查看'" :formList="formInfo.info2"></formPart>
        <formPart v-if="modalType != 'add'" listTitle="跟进信息" ref="info3" :modalTitle="modalType == 'edit' ? 'EDIT-FORM' : '查看'" :formList="formInfo.info3"></formPart>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { tableData12, customColumns12 } from '../../js/staticData';
import cardTitle from '../../components/title';
import cardList from '../../components/cardList';
import advancedFilter from '../../components/advancedFilter';
import modalBtns from '../../components/modalBtns';
import formName from '../../components/formName';
import formPart from '../../components/formPart';
import custActTable from "../../components/custActTable.vue";
export default {
  name: "stakeholderManagementDoing",
  components: { cardTitle, cardList, custActTable, advancedFilter, modalBtns, formName, formPart },
  data() {
    return {
      cardListData: [
        {
          img3: require('../../images/card-icon15.png'),
          line4: '管理中',
          line3: '39'
        },
        {
          img3: require('../../images/card-icon16.png'),
          line4: '移出管理',
          line3: '0'
        },
        {
          img3: require('../../images/card-icon1.png'),
          line4: '参与度异常',
          line3: '13'
        }
      ],
      formData: {
        ipt1: '',
        ipt2: '',
        sel1: [],
        sel2: [],
        sel3: [],
      },
      treeSearch: '',
      showSearch: true,
      treeData: [
        {
          label: '管理策略',
          children: [
            { label: '监督', id: 0},
            { label: '随时告知', id: 1},
            { label: '令其满意', id: 2},
            { label: '重点管理', id: 3}
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      contentIdx: 0,
      customColumns: customColumns12,
      tableData: tableData12[0],
      page: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      modalState: false,
      modalType: '',
      modalTitle: '',
      formInfo: {}
    };
  },
  watch: {
    tableData: {
      handler(n, o) {
        setTimeout(() => {
          document.querySelector('.border-r').style.height = `${document.querySelector('.cust-act-table').offsetHeight}px`;
        }, 10)
      },
      deep: true
    },
    contentIdx(n) {},
    modalType(n){},
    cardIdx(n){},
  },
  mounted() {
    this.$nextTick(() => {
      this.tableData = tableData12[0];
      setTimeout(() => {
        document.querySelector('.border-r').style.height = `${document.querySelector('.cust-act-table').offsetHeight}px`;
      }, 1500)
      this.customColumns = customColumns12;
    })
  },
  methods: {
    /**
     * @author Wrl
     * 重置查询条件
     */
    resetForm() {
      this.formData = {};
    },
    /**
     * @author Wrl
     * 切换查询条件
     */
    changeSearch() {
      this.showSearch = !this.showSearch
    },
    /**
     * @author Wrl
     * 点击树形控件
     */
    handleNodeClick(data) {
      this.contentIdx = data.id;
      this.customColumns = customColumns12;
      this.tableData = tableData12[this.contentIdx];
    },
    /**
     * @author Wrl
     * 点击列表操作 0:更新 1:移出 2:移入
     */
    getDetail(row) {
      if(row && row.actIdx) {
        this.modalState = false;
        let btnIdx = row.actIdx;
        if(btnIdx == '0') {
          this.showModal('edit')
        } else {
          let type = btnIdx == '1' ? '移出' : btnIdx == '2' ? '移入' : '';
          this.$confirm(`确定${type}相关方管理？`, '系统提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            document.querySelector('.v-modal').style.display = "none";
            this.$message({
              type: 'success',
              message: `${type}成功!`
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        } 
      }
    },
    /**
     * @author Wrl
     * 显示弹窗
     */
    showModal(type) {
      this.modalType = type;
      this.modalTitle = type == 'add' ? '新建' : type == 'edit' ? '修改' : '查看';
      if(type == 'add') {
          this.formInfo = {
            info1: [
              { l: '项目名称', v: '', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 12 },
              { l: '项目编号', v: '', type: 'input', span: 6 },
              { l: '项目负责人', v: '', type: 'input', span: 6 }
            ],
            info2: [
              { l: '名称', v: '', type: 'input', span: 6 },
              { l: '分类', v: '', type: 'select', option: [{l:'内部', v: '0'},{l:'外部', v: '1'}], span: 6 },
              { l: '项目角色', v: '', type: 'select', option: [{l:'主管领导', v: '0'},{l:'项目负责人', v: '1'},{l:'项目成员', v: '2'},{l:'项目会计', v: '3'},{l:'项目出纳', v: '4'},{l:'业务负责人', v: '5'}], span: 6 },
              { l: '管理中', v: '', type: 'select', option: [{l:'是', v: '0'},{l:'否', v: '1'}], span: 6 },
              { l: '企业名称', v: '', type: 'input', span: 12 },
              { l: '部门', v: '', type: 'input', span: 6 },
              { l: '职务', v: '', type: 'input', span: 6 },
              { l: '联系电话', v: '', type: 'input', span: 6 },
              { l: '权利影响', v: '', type: 'select', option: [{l:'1级', v: '0'},{l:'2级', v: '1'},{l:'3级', v: '2'},{l:'4级', v: '3'},{l:'5级', v: '4'},{l:'6级', v: '5'},{l:'7级', v: '6'},{l:'8级', v: '7'}], span: 6 },
              { l: '关心程度', v: '', type: 'select', option: [{l:'十分不关心', v: '0'},{l:'特别不关心', v: '1'},{l:'非常不关心', v: '2'},{l:'很不关心', v: '3'},{l:'较关心', v: '4'},{l:'很关心', v: '5'},{l:'非常关心', v: '6'},{l:'特别关心', v: '7'}], span: 6 },
              { l: '管理策略', v: '监督', type: 'input', span: 6 },
              { l: '评估参与度', v: '', type: 'select', option: [{l:'不知晓', v: '0'},{l:'抵制', v: '1'},{l:'中立', v: '2'},{l:'支持', v: '3'},{l:'领导', v: '4'}], span: 6 },
              { l: '当前参与度', v: '', type: 'select', option: [{l:'不知晓', v: '0'},{l:'抵制', v: '1'},{l:'中立', v: '2'},{l:'支持', v: '3'},{l:'领导', v: '4'}], span: 6 },
              { l: '登记人', v: '朱冠', type: 'inputIconR', icon: { path:require('../../images/modal-icon4.png'), width: '14px', height: '16px'}, span: 6 },
              { l: '跟进人', v: '', type: 'inputIconR', icon: { path:require('../../images/modal-icon4.png'), width: '14px', height: '16px'}, span: 6 },
              { l: '期望', v: '', type: 'input', span: 24 }
            ]
          }
        } else {
          this.formInfo = {
            info1: [
              { l: '项目名称', v: '蓝旗机器人造林系统升级', type: 'inputIconR', icon: { path:require('../../images/modal-icon1.png'), width: '14px', height: '16px'}, span: 12 },
              { l: '项目编号', v: 'GC2022010001', type: 'input', span: 6 },
              { l: '项目负责人', v: '朱冠', type: 'input', span: 6 }
            ],
            info2: [
              { l: '名称', v: '王伟', type: 'input', span: 6 },
              { l: '分类', v: '外部', type: 'select', option: [{l:'内部', v: '0'},{l:'外部', v: '1'}], span: 6 },
              { l: '项目角色', v: '主管领导', type: 'select', option: [{l:'主管领导', v: '0'},{l:'项目负责人', v: '1'},{l:'项目成员', v: '2'},{l:'项目会计', v: '3'},{l:'项目出纳', v: '4'},{l:'业务负责人', v: '5'}], span: 6 },
              { l: '管理中', v: '是', type: 'select', option: [{l:'是', v: '0'},{l:'否', v: '1'}], span: 6 },
              { l: '企业名称', v: 'XX集团有限公司', type: 'input', span: 12 },
              { l: '部门', v: '总经办', type: 'input', span: 6 },
              { l: '职务', v: '总经理助理', type: 'input', span: 6 },
              { l: '联系电话', v: '18866668888', type: 'input', span: 6 },
              { l: '权利影响', v: '8级', type: 'select', option: [{l:'1级', v: '0'},{l:'2级', v: '1'},{l:'3级', v: '2'},{l:'4级', v: '3'},{l:'5级', v: '4'},{l:'6级', v: '5'},{l:'7级', v: '6'},{l:'8级', v: '7'}], span: 6 },
              { l: '关心程度', v: '较关心', type: 'select', option: [{l:'十分不关心', v: '0'},{l:'特别不关心', v: '1'},{l:'非常不关心', v: '2'},{l:'很不关心', v: '3'},{l:'较关心', v: '4'},{l:'很关心', v: '5'},{l:'非常关心', v: '6'},{l:'特别关心', v: '7'}], span: 6 },
              { l: '管理策略', v: '重点管理', type: 'input', span: 6 },
              { l: '评估参与度', v: '支持', type: 'select', option: [{l:'不知晓', v: '0'},{l:'抵制', v: '1'},{l:'中立', v: '2'},{l:'支持', v: '3'},{l:'领导', v: '4'}], span: 6 },
              { l: '当前参与度', v: '中立', type: 'select', option: [{l:'不知晓', v: '0'},{l:'抵制', v: '1'},{l:'中立', v: '2'},{l:'支持', v: '3'},{l:'领导', v: '4'}], span: 6 },
              { l: type != 'add' ? '登记日期' : '登记人', v: type != 'add' ? '2024-08-02' : '朱冠', type: type != 'add' ? 'datePicker' : 'inputIconR', icon: { path:require('../../images/modal-icon4.png'), width: '14px', height: '16px'}, span: 6 },
              { l: type != 'add' ? '登记人' : '跟进人', v: '', type: 'inputIconR', icon: { path:require('../../images/modal-icon4.png'), width: '14px', height: '16px'}, span: 6 },
              { l: '期望', v: '', type: 'input', span: 24 }
            ],
            info3: [
              { l: '跟进人', v: '苑珙', type: type == 'edit' ? 'inputIconR' : 'input', icon: { path:require('../../images/modal-icon4.png'), width: '14px', height: '16px'}, span: 6 },
              { l: '跟进日期', v: '', type: type == 'edit' ? 'datePicker' : 'input', span: 6 },
              { l: '跟进说明', v: '', type: 'input', span: 12 }
            ]
          }
        }
        this.modalState = true;
    },
		/**
		 * @author Wrl
		 * 获取分页信息
		 */
		changePage(page) {
			this.page.pageNum = page.pageNum; // 当前页
			this.page.pageSize = page.pageSize; // 每页条数
			this.page.total = page.total; // 总数
		},
  }
};
</script>

<style lang="scss" scoped>
  .stakeholder-management-doing {
    .card-group,
    .table-top-btns {
      margin-bottom: 16px;
    }
    ::v-deep {
      .cust-card .card-item {
        cursor: unset;
      }
      .search {
        .el-form-item {
          width: 100%;
        }
        .el-form-item__content {
          width: calc(100% - 90px);
        }
      }
    }
    .tree-search {
      width: 200px;
      ::v-deep .el-input__inner {
        border-radius: 20px;
      }
    }
    .cust-tree {
      margin-top: 16px;
    }
    .bottom-card {
      min-height: 100px;
    }
    ::v-deep {
      .el-dialog__header{
        padding: 20px 20px 0;
      }
      .el-dialog__body {
        padding: 10px 20px 30px;
      }
      .el-dialog__headerbtn {
        z-index: 100;
      }
      .el-card__body {
        padding: 10px 20px 0;
      }
    }
    .border-r {
      min-width: 220px;
      border-right: 1px solid #cccccc;
    }
  }
</style>